<template>
  <view class="bunch-wrap">
    <back :back-title="backTitle"></back>
    <search></search>
    <view class="grade-wrap" :class="{show: show}">
      <view class="grade-title" @click="handleShow">
        <text class="grade-desc">年级</text>
        <image v-if="!show" src="/static/images/bunch/non-check.png"/>
        <image v-if="show" src="/static/images/bunch/check.png"/>
      </view>
      <view class="grade-group">
        <view v-for="(item ,index) of gradeList" :key="index" :class="{current: gradeIndex=== index}" @click="handleGrade(index)">{{item}}</view>
      </view>
    </view>
    <tab :currentIndex.sync="currentIndex"></tab>
    <swiper-list :currentIndex.sync="currentIndex"></swiper-list>
  </view>
</template>

<script>
import tab from './components/tab'
import swiperList from './components/swiperList'
export default {
  name: 'bunch',
  components: {
    tab,
    swiperList
  },
  data() {
    return {
      backTitle: '课程点播',
      show: false,
      gradeList: ['高一','高二','高三'],
      gradeIndex: 0,
      currentIndex: 0
    }
  },
  methods: {
    handleShow() {
      this.show = !this.show
    },
    handleGrade(index) {
      this.gradeIndex = index
    }
  }
}

</script>
<style lang='scss' scoped>
  .bunch-wrap{
    width: 100%;
    min-height: 100vh;
    .grade-wrap{
      width: 100%;
      background:rgba(0,0,0,.84);
      height:90upx;
      position: absolute;
      top: 220upx;
      transition: all .3s;
      left: 0;
      z-index: 10;
      overflow: hidden;
      .grade-title{
        padding: 0 20upx;
        border-bottom: 1px solid #e1e1e1;
        box-sizing: border-box;
        display: flex;
        width: 100%;
        height:90upx;
        align-items: center;
        background-color: #fff;
        .grade-desc{
          margin-right: 10upx;
          font-size: 30upx;
          box-sizing: border-box;
          color: #999;
        }
        image{
          width: 40upx;
          height: 20upx;
        }
      }
      .grade-group{
        padding-left: 82upx;
        box-sizing: border-box;
        background-color: #fff;
        width: 100%;
        display: flex;
        align-items: center;
        height: 90upx;
        view{
          font-size: 30upx;
          color: #999;
          margin-right: 106upx;
          &:nth-last-of-type(1) {
            margin-right: 0upx;
          }
        }
        .current{
          color: #0D84D5;
        }
      }
    }
    .show{
      height: calc(100vh - 220upx);
      .grade-title{
        .grade-desc{
          color: #0D84D5;
        }
      }
      
    }
  }
</style>